import React from 'react'
import { sleep } from 'antd-mobile/es/utils/sleep'
import Menu from '@/views/Menu'

import '@/assets/css/OrderIndex.scoped.css'

const Component = () =>
{
  let [active, SetActive] = useState('all')
  let [page, SetPage] = useState(1)
  let [list, SetList] = useState([])
  let [hasMore, SethasMore] = useState(false)
  let [show, SetShow] = useState(false);
  let [form] = React.UI.Form.useForm()
  let [orderid, SetOrderid] = useState(0)
  let [comment, SetComment] = useState({
    comment: '',
    rate: 0,
  });



  React.useEffect(() => {
    OrderData()
  }, [])

  //选项卡切换
  const TabChange = async (key: string) => 
  {
    SetActive(key)

    await sleep(1000)

    await onRefresh()
  }
  

  //下拉刷新
  const onRefresh = async () =>
  {
    SetPage(1)
    SethasMore(true)
    SetList((prev) => [])

    await sleep(1000)
    await OrderData()
  }

  //上拉加载
  const loadMore = async () => 
  {
    await sleep(1000)
    OrderData()
  }
  

  //请求数据
  const OrderData = async () =>
  {
    var params = {
      busid: React.business.id,
      page,
      status: active == "all" ? '' : active
    }

    var result = await React.request.post('/order/index', params)

    if(result.code == 0)
    {
      SethasMore(false) //没有更多数据
      return false
    }

    SetPage(page + 1)
    SethasMore(true) //后面还有数据
    SetList(list.concat(result.data))
  }

  const CommentChange = async (orderid) =>
  {
    SetShow(true)
    SetOrderid(orderid)
  }

  //表单提交
  const onFinish = async (values:any) => 
  {
      SetShow(false)

      values.orderid = orderid

      var result = await React.request.post('/order/comment', values)

      if(result.code == 0)
      {
          React.toast(result.msg, null, 'fail');
          return false
      }

      React.toast(result.msg, null, 'success');

      await onRefresh(); //刷新列表
  }

  return (
    <>
      {/* 选项卡切换 */}
      <React.UI.Tabs onChange={TabChange} activeKey={active} activeLineMode={'full'}>
        <React.UI.Tabs.Tab title="全部" key="all" />
        <React.UI.Tabs.Tab title="未支付" key="0" />
        <React.UI.Tabs.Tab title="已支付" key="1" />
        <React.UI.Tabs.Tab title="已入住" key="2" />
        <React.UI.Tabs.Tab title="已退房" key="3" />
        <React.UI.Tabs.Tab title="已评价" key="4" />
        <React.UI.Tabs.Tab title="申请退款" key="-1" />
      </React.UI.Tabs>
      
      {/* 下拉列表 */}
      <React.UI.PullToRefresh onRefresh={onRefresh}>
        {/* 订单列表 */}
        <div className='order_list'>
          {list && list.map((item:any, key:number) => 
              <div className="item" key={key}>
                  <div className="item_top">
                      <p>{item.room && item.room.name}</p>
                      <div className="top_tag">{item.status_text}</div>
                  </div>

                  <div className="house">
                      <div className="item_swipers">
                          <img src={item.room && item.room.thumb_text} />
                      </div>
                      <div className="item_mask">{item.starttime_text}({item.startday_text}) - 共{item.order_day}晚 - {item.endtime_text}({item.endday_text})</div>
                  </div>

                  <div className="item_bar">
                    <div className='time'>订单实付：￥{item.price}</div>
                    <div className='action'>

                      {item.status == '3' ? (<React.UI.Button color='success' size='small' onClick={(e) => CommentChange(item.id)}>立即评价</React.UI.Button>) : (<></>)}

                      <React.UI.Button color='warning' size='small' onClick={() => React.navigate(`/order/info?orderid=${item.id}`)}>查看详情</React.UI.Button>
                    </div>
                  </div>
              </div>
          )}
        </div>
      </React.UI.PullToRefresh>

      {/* 上拉加载无限滚动 */}
      <React.UI.InfiniteScroll loadMore={loadMore} hasMore={hasMore} threshold={0} />

      {/* 弹出层 */}
      <React.UI.Popup visible={show} closeOnMaskClick={true} onMaskClick={() => SetShow(false)}>
        <React.UI.Form
            form={form}
            name="comment"
            layout='horizontal'
            mode='card'
            initialValues={comment}
            onFinish={onFinish}
            footer={<React.UI.Button block type='submit' color='primary' size='large'>提交评论</React.UI.Button>}
        >
            <React.UI.Form.Item name="comment" label="评价内容" rules={[{ required: true }]}>
                <React.UI.Input placeholder="请输入评价内容" />
            </React.UI.Form.Item>

            <React.UI.Form.Item name="rate" label="星级评价">
              <React.UI.Rate value={comment.rate} />
            </React.UI.Form.Item>
        </React.UI.Form>
      </React.UI.Popup>

      <Menu />
    </>
  )
}

export default Component